<template>
  <!-- 数字雨背景层 -->
  <div class="digital-rain-container" ref="digitalRainContainer"></div>
  
  <!-- 系统状态栏 -->
  <div class="system-status-bar">
    <div class="status-item">系统: 在线</div>
    <div class="status-item">用户管理</div>
    <div class="status-item" v-if="connectionCount">连接数: {{ connectionCount }}</div>
    <div class="status-item" v-if="runningTime">运行时间: {{ runningTime }}</div>
  </div>

  <!-- 主内容区域 -->
  <div class="terminal-container">
    <!-- 终端头部 -->
    <div class="terminal-header">
      <div class="terminal-title">用户管理模块.exe</div>
      <div class="terminal-controls">
        <div class="control-button">■</div>
        <div class="control-button">■</div>
        <div class="control-button">■</div>
      </div>
    </div>
    
    <!-- 终端内容 -->
    <div class="terminal-content">
      <!-- 面包屑导航 - 黑客风格 -->
      <div class="hacker-breadcrumb">
        <span class="breadcrumb-item">[ROOT]</span>
        <span class="breadcrumb-separator">></span>
        <span class="breadcrumb-item">[RBAC管理]</span>
        <span class="breadcrumb-separator">></span>
        <span class="breadcrumb-item">[用户管理]</span>
      </div>
      
      <!-- 控制面板 -->
      <div class="control-panel">
        <div class="panel-title">系统控制面板</div>
        
        <!-- 搜索表单 -->
        <div class="search-form">
          <div class="form-row">
            <div class="form-item">
              <label class="form-label">用户昵称</label>
              <input 
                v-model="searData.UserNickname" 
                type="text" 
                class="hacker-input" 
                placeholder="输入用户名"
                @focus="onFocus('UserNickname')"
                @blur="onBlur('UserNickname')"
              />
            </div>
            
            <div class="form-actions">
              <button class="hacker-button primary" @click="getUser()">
                <span class="button-icon">[</span> 查询 <span class="button-icon">]</span>
              </button>
              <button class="hacker-button success" @click="addUser()">
                <span class="button-icon">[</span> 添加 <span class="button-icon">]</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 用户列表 -->
      <div class="data-section">
        <div class="section-header">
              <span class="section-title">用户数据库</span>
              <span class="section-info">记录数量: {{ page.totalCount }}</span>
            </div>
        
        <!-- 黑客风格表格 -->
        <div class="hacker-table">
          <div class="table-header">
            <div class="table-cell index">#</div>
            <div class="table-cell username">用户名</div>
            <div class="table-cell password">密码</div>
            <div class="table-cell nickname">昵称</div>
            <div class="table-cell role">角色</div>
            <div class="table-cell status">状态</div>
            <div class="table-cell create-time">创建时间</div>
            <div class="table-cell actions">系统操作</div>
          </div>
          
          <div class="table-body">
            <div 
              v-for="(row, index) in userData" 
              :key="row.userId" 
              class="table-row"
              @mouseenter="row._hover = true"
              @mouseleave="row._hover = false"
            >
              <div class="table-cell index">{{ (page.PageIndex - 1) * page.PageSize + index + 1 }}</div>
              <div class="table-cell username">{{ row.userName }}</div>
              <div class="table-cell password">******</div>
              <div class="table-cell nickname">{{ row.userNickname }}</div>
              <div class="table-cell role">{{ row.roleName }}</div>
              <div class="table-cell status">
                <span class="status-indicator" :class="row.status === '0' ? 'active' : 'inactive'">
                  {{ row.status === '0' ? '活跃' : '非活跃' }}
                </span>
              </div>
              <div class="table-cell create-time">{{ formatDate(row.createTime) }}</div>
              <div class="table-cell actions">
                <button 
                  class="action-button edit"
                  @click="editUser(row)"
                  title="编辑用户"
                >
                  <span class="button-code">编辑</span>
                </button>
              </div>
            </div>
            
            <!-- 空状态 -->
            <div v-if="userData.length === 0" class="empty-state">
              <div class="empty-message">未检测到用户数据</div>
            </div>
          </div>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination">
          <div class="page-info">PAGE {{ page.PageIndex }} / {{ page.pageCount || 1 }}</div>
          <div class="page-controls">
            <button 
              class="page-button"
              :disabled="page.PageIndex === 1"
              @click="page.PageIndex > 1 && (page.PageIndex-- && getUser())"
            >
              上一页
            </button>
            <button 
              class="page-button"
              :disabled="!page.pageCount || page.PageIndex >= page.pageCount"
              @click="page.pageCount && page.PageIndex < page.pageCount && (page.PageIndex++ && getUser())"
            >
              下一页
            </button>
          </div>
          <div class="page-size">
            <label>每页条数:</label>
            <select 
              v-model="page.PageSize" 
              class="hacker-select"
              @change="() => { page.PageIndex = 1; getUser(); }"
            >
              <option :value="1">1</option>
              <option :value="2">2</option>
              <option :value="3">3</option>
              <option :value="4">4</option>
              <option :value="5">5</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 添加/编辑用户弹窗 - 黑客风格 -->
  <div v-if="dialogVisible" class="modal-overlay" @click="closeModal">
    <div class="hacker-modal" @click.stop>
      <div class="modal-header">
        <div class="modal-title">{{ dialogTitle }}</div>
        <button class="modal-close" @click="closeModal">[X]</button>
      </div>
      
      <div class="modal-body">
        <form ref="ruleFormRef" @submit.prevent="submitForm(ruleFormRef)">
          <div class="form-group">
            <label class="modal-label">用户名</label>
            <input 
              v-model="ruleForm.userName" 
              type="text" 
              class="hacker-input modal-input"
              placeholder="输入用户名"
              required
            />
          </div>
          
          <div class="form-group">
            <label class="modal-label">密码</label>
            <input 
              v-model="ruleForm.userPass" 
              type="password" 
              class="hacker-input modal-input"
              placeholder="输入密码"
              required
            />
          </div>
          
          <div class="form-group">
            <label class="modal-label">昵称</label>
            <input 
              v-model="ruleForm.userNickname" 
              type="text" 
              class="hacker-input modal-input"
              placeholder="输入昵称"
              required
            />
          </div>
          
          <div class="form-group">
            <label class="modal-label">角色</label>
            <div class="role-checkboxes">
              <label 
                v-for="item in roleData" 
                :key="item.roleId"
                class="role-checkbox"
              >
                <input 
                  type="checkbox"
                  :value="item.roleId"
                  v-model="ruleForm.roleIds"
                  class="custom-checkbox"
                />
                <span class="checkbox-label">{{ item.roleName }}</span>
              </label>
            </div>
          </div>
        </form>
      </div>
      
      <div class="modal-footer">
        <button class="hacker-button secondary" @click="closeModal">
          <span class="button-icon">[</span> 取消 <span class="button-icon">]</span>
        </button>
        <button class="hacker-button primary" @click="submitForm(ruleFormRef)">
          <span class="button-icon">[</span> 确认 <span class="button-icon">]</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 系统日志面板 -->
  <div class="system-log-panel">
    <div class="log-header">系统日志</div>
    <div class="log-content">
      <div v-for="(log, index) in systemLogs" :key="index" class="log-entry">
        <span class="log-time">{{ log.time }}</span>
        <span class="log-message">{{ log.message }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch, onUnmounted } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import moment from 'moment'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { useCounterStore } from "@/stores/counter"
import { dataRead, dataWrite } from '@/Utils/Http';

// 类型定义
interface RuleForm  {
    userId: number;
    userName: string;
    userPass: string;
    userNickname: string;
    roleIds: string[] | number[];
}

// 系统日志类型
interface SystemLog {
  time: string;
  message: string;
}

// 变量初始化
const counter = useCounterStore();
const router = useRouter();
const userData = ref<any[]>([]);
const searData = reactive({ UserNickname: '' });
const page = reactive({ PageIndex: 1, PageSize: 5, totalCount: 0, pageCount: 0 });
const dialogVisible = ref(false);
const dialogTitle = ref('添加用户');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
    userId: 0,
    userName: '',
    userPass: '',
    userNickname: '',
    roleIds: []
});
const roleData = ref<any[]>([]);
const systemLogs = ref<SystemLog[]>([]);
const connectionCount = ref<number>(0);
const runningTime = ref<string>('');
const digitalRainContainer = ref<HTMLDivElement>();
const focusedField = ref<string | null>(null);
const startTime = ref<number>(Date.now());

// 添加系统日志
const addSystemLog = (message: string) => {
  const now = new Date();
  const timeString = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
  
  systemLogs.value.unshift({ time: timeString, message });
  
  // 保持日志数量在合理范围内
  if (systemLogs.value.length > 50) {
    systemLogs.value.pop();
  }
};

// 生成随机连接数
const generateConnectionCount = () => {
  connectionCount.value = Math.floor(Math.random() * 20) + 1;
};

// 更新运行时间
const updateRunningTime = () => {
  const currentTime = Date.now();
  const elapsedTime = Math.floor((currentTime - startTime.value) / 1000);
  const hours = Math.floor(elapsedTime / 3600);
  const minutes = Math.floor((elapsedTime % 3600) / 60);
  const seconds = elapsedTime % 60;
  
  runningTime.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
};

// 初始化数字雨效果
const initDigitalRain = () => {
  if (!digitalRainContainer.value) return;
  
  const container = digitalRainContainer.value;
  const width = container.clientWidth;
  const height = container.clientHeight;
  
  // 创建canvas元素
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  container.innerHTML = '';
  container.appendChild(canvas);
  
  const ctx = canvas.getContext('2d');
  if (!ctx) return;
  
  // 设置中文字符集
  const chars = '系统用户管理账号权限安全数据设置'.split('');
  const fontSize = 14;
  const columns = Math.floor(width / fontSize);
  
  // 每个列的起始位置
  const drops: number[] = [];
  for (let i = 0; i < columns; i++) {
    drops[i] = Math.floor(Math.random() * -100);
  }
  
  // 数字雨动画
  const draw = () => {
    ctx.fillStyle = 'rgba(0, 20, 0, 0.05)';
    ctx.fillRect(0, 0, width, height);
    
    ctx.fillStyle = '#0f0';
    ctx.font = `${fontSize}px monospace`;
    
    for (let i = 0; i < drops.length; i++) {
      const text = chars[Math.floor(Math.random() * chars.length)];
      ctx.fillText(text, i * fontSize, drops[i] * fontSize);
      
      if (drops[i] * fontSize > height && Math.random() > 0.975) {
        drops[i] = 0;
      }
      
      drops[i]++;
    }
  };
  
  // 每33毫秒更新一帧
  const interval = setInterval(draw, 33);
  
  // 在组件卸载时清除interval
  onUnmounted(() => clearInterval(interval));
};

// 格式化日期
const formatDate = (dateString: string): string => {
  if (!dateString) return '';
  try {
    return moment(dateString).format('YYYY-MM-DD HH:mm:ss');
  } catch (error) {
    return dateString;
  }
};

// 表单验证规则
const addRules = reactive<FormRules<RuleForm>>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    userPass: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    userNickname: [
        { required: true, message: '请输入昵称', trigger: 'blur' }
    ]
});

const editRules = reactive<FormRules<RuleForm>>({});

// 生命周期钩子
onMounted(() => {
    addSystemLog('用户管理模块已初始化');
    getUser();
    bindRole();
    generateConnectionCount();
    
    // 每秒更新一次运行时间
    const runningTimeInterval = setInterval(updateRunningTime, 1000);
    
    // 每5秒更新一次连接数
    const connectionInterval = setInterval(generateConnectionCount, 5000);
    
    // 初始化数字雨
    initDigitalRain();
    
    // 监听窗口大小变化，重新调整数字雨
    const resizeHandler = () => initDigitalRain();
    window.addEventListener('resize', resizeHandler);
    
    // 清理函数
    onUnmounted(() => {
        clearInterval(runningTimeInterval);
        clearInterval(connectionInterval);
        window.removeEventListener('resize', resizeHandler);
    });
});

// 获取用户列表
const getUser = () => {
    addSystemLog(`查询用户数据中 [${searData.UserNickname || '全部'}]`);
    
    dataRead.get('/BaseData/UserQuery', {
        params: {
            UserNickname: searData.UserNickname,
            PageIndex: page.PageIndex,
            PageSize: page.PageSize
        }
    }).then(res => {
        userData.value = res.data.data.data.map((item: any) => ({ ...item, _hover: false }));
        page.totalCount = res.data.data.totalCount;
        page.pageCount = res.data.data.pageCount;
        addSystemLog(`用户数据已加载: ${userData.value.length} 条记录`);
    }).catch(err => {
        addSystemLog('错误: 加载用户数据失败');
        console.error(err);
    });
};

// 监听分页变化
watch(page, () => {
    getUser();
});

// 绑定角色
const bindRole = () => {
    addSystemLog('加载角色数据中');
    
    dataRead.get('/BaseData/BindRole').then(res => {
        roleData.value = res.data.data;
        addSystemLog(`角色数据已加载: ${roleData.value.length} 个角色`);
    }).catch(err => {
        addSystemLog('错误: 加载角色数据失败');
        console.error(err);
    });
};

// 添加用户
const addUser = () => {
    addSystemLog('打开添加用户对话框');
    dialogTitle.value = '添加用户';
    ruleForm.userId = 0;
    ruleForm.userName = '';
    ruleForm.userPass = '';
    ruleForm.userNickname = '';
    ruleForm.roleIds = [];
    dialogVisible.value = true;
};

// 编辑用户
const editUser = (row: any) => {
    addSystemLog(`打开编辑用户对话框: ${row.userName}`);
    dialogTitle.value = '编辑用户';
    ruleForm.roleIds = row.roleId;
    Object.assign(ruleForm, row);
    dialogVisible.value = true;
};

// 关闭弹窗
const closeModal = () => {
    addSystemLog('用户对话框已关闭');
    dialogVisible.value = false;
};

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (ruleForm.roleIds.length === 0) {
        ElMessage.error('请选择角色!!!');
        addSystemLog('错误: 未选择角色');
        return;
      }
      
      addSystemLog(`${ruleForm.userId === 0 ? '添加' : '更新'} 用户: ${ruleForm.userName}`);
      
      if (ruleForm.userId === 0) {
        dataWrite.post('/BaseData/AddUser', ruleForm).then(res => {
          if (res.data.code === 300) {
            ElMessage.success('添加成功');
            addSystemLog(`用户添加成功: ${ruleForm.userName}`);
            dialogVisible.value = false;
            getUser();
          } else if (res.data.data === -1) {
            ElMessage.error(res.data.message);
            addSystemLog(`错误: ${res.data.message}`);
          } else {
            ElMessage.error('添加失败');
            addSystemLog(`错误: 添加用户失败`);
          }
        }).catch(err => {
          ElMessage.error('添加失败');
          addSystemLog(`ERROR: FAILED TO ADD USER`);
          console.error(err);
        });
      } else {
        dataWrite.post('/BaseData/UpdUser', ruleForm).then(res => {
          if (res.data.code === 400) {
            ElMessage.success('修改成功');
            addSystemLog(`用户更新成功: ${ruleForm.userName}`);
            dialogVisible.value = false;
            getUser();
          } else {
            ElMessage.error('修改失败');
            addSystemLog(`错误: 更新用户失败`);
          }
        }).catch(err => {
          ElMessage.error('修改失败');
          addSystemLog(`ERROR: FAILED TO UPDATE USER`);
          console.error(err);
        });
      }
    }
  });
};

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 处理输入框焦点事件
const onFocus = (field: string) => {
  focusedField.value = field;
};

const onBlur = (_field: string) => {
  focusedField.value = null;
};
</script>

<style scoped>
/* 基础黑客风格样式 */
:deep(*) {
  font-family: 'Courier New', monospace !important;
}

body {
  background-color: #0a0a0a;
  color: #0f0;
  overflow-x: hidden;
}

/* 数字雨背景 */
.digital-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.15;
}

/* 系统状态栏 */
.system-status-bar {
  background-color: #080808;
  border-bottom: 1px solid #0f0;
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #0f0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.status-item {
  animation: flicker 5s infinite;
}

@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.3;
  }
}

/* 终端容器 */
.terminal-container {
  margin-top: 35px;
  margin-bottom: 150px;
  padding: 20px;
}

.terminal-header {
  background-color: #111;
  border: 1px solid #0f0;
  border-bottom: none;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px 5px 0 0;
}

.terminal-title {
  color: #0f0;
  font-weight: bold;
}

.terminal-controls {
  display: flex;
  gap: 5px;
}

.control-button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #0f0;
  color: #080808;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  cursor: pointer;
}

.terminal-content {
  background-color: #111;
  border: 1px solid #0f0;
  border-radius: 0 0 5px 5px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
}

/* 面包屑导航 */
.hacker-breadcrumb {
  margin-bottom: 20px;
  font-size: 14px;
  color: #0f0;
}

.breadcrumb-item {
  color: #0f0;
  cursor: pointer;
  transition: all 0.3s;
}

.breadcrumb-item:hover {
  color: #fff;
  text-shadow: 0 0 5px #0f0;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #555;
}

/* 控制面板 */
.control-panel {
  background-color: #0a0a0a;
  border: 1px solid #0f0;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
}

.panel-title {
  color: #0f0;
  font-size: 16px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.search-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: center;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-label {
  color: #0f0;
  font-size: 12px;
  text-transform: uppercase;
}

.hacker-input {
  background-color: #080808;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 8px 12px;
  border-radius: 3px;
  width: 200px;
  transition: all 0.3s;
}

.hacker-input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  border-color: #fff;
  color: #fff;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.hacker-button {
  background-color: #080808;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

.hacker-button:hover {
  background-color: #0f0;
  color: #080808;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.hacker-button.primary {
  border-color: #0f0;
}

.hacker-button.success {
  border-color: #0f0;
}

.hacker-button.secondary {
  border-color: #555;
  color: #555;
}

.hacker-button.secondary:hover {
  background-color: #555;
  color: #080808;
}

.button-icon {
  color: #0f0;
  font-weight: bold;
}

/* 数据部分 */
.data-section {
  background-color: #0a0a0a;
  border: 1px solid #0f0;
  border-radius: 5px;
  padding: 15px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  color: #0f0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-info {
  color: #555;
  font-size: 12px;
}

/* 黑客风格表格 */
.hacker-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #080808;
  border: 1px solid #0f0;
  border-radius: 3px;
  margin-bottom: 15px;
  overflow-x: auto;
}

.table-header {
  display: grid;
  grid-template-columns: 70px 120px 100px 120px 120px 100px 160px 120px;
  background-color: #111;
  border-bottom: 1px solid #0f0;
  padding: 10px 15px;
  font-weight: bold;
  color: #0f0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  min-width: 910px;
}

.table-row {
  display: grid;
  grid-template-columns: 70px 120px 100px 120px 120px 100px 160px 120px;
  border-bottom: 1px solid #222;
  padding: 10px 15px;
  transition: all 0.3s;
  min-width: 910px;
}

.table-row:hover {
  background-color: #1a1a1a;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
}

.table-cell {
  color: #0f0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-cell.index {
  text-align: center;
  color: #555;
}

.table-cell.password {
  color: #555;
}

.status-indicator {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  text-transform: uppercase;
}

.status-indicator.active {
  background-color: #033;
  color: #0f0;
  border: 1px solid #0f0;
}

.status-indicator.inactive {
  background-color: #300;
  color: #f00;
  border: 1px solid #f00;
}

.actions {
  display: flex;
  justify-content: center;
}

.action-button {
  background-color: #080808;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.action-button:hover {
  background-color: #0f0;
  color: #080808;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.action-button.edit .button-code {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 空状态 */
.empty-state {
  padding: 40px 0;
  text-align: center;
  color: #555;
}

.empty-message {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 分页控件 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.page-info {
  color: #555;
  font-size: 12px;
}

.page-controls {
  display: flex;
  gap: 10px;
}

.page-button {
  background-color: #080808;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 5px 15px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.page-button:hover:not(:disabled) {
  background-color: #0f0;
  color: #080808;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.page-button:disabled {
  border-color: #333;
  color: #333;
  cursor: not-allowed;
}

.page-size {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f0;
  font-size: 12px;
}

.hacker-select {
  background-color: #080808;
  border: 1px solid #0f0;
  color: #0f0;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.hacker-modal {
  background-color: #111;
  border: 1px solid #0f0;
  border-radius: 5px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
}

.modal-header {
  background-color: #0a0a0a;
  border-bottom: 1px solid #0f0;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  color: #0f0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-close {
  background: none;
  border: none;
  color: #0f0;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.modal-close:hover {
  color: #fff;
  text-shadow: 0 0 5px #0f0;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.modal-label {
  display: block;
  color: #0f0;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.modal-input {
  width: 100%;
  box-sizing: border-box;
}

.role-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.role-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #0f0;
  font-size: 13px;
}

.custom-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  background-color: #080808;
  border: 1px solid #0f0;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.custom-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0f0;
  font-size: 12px;
}

.checkbox-label {
  cursor: pointer;
}

.modal-footer {
  background-color: #0a0a0a;
  border-top: 1px solid #0f0;
  padding: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 系统日志面板 */
.system-log-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background-color: #080808;
  border-top: 1px solid #0f0;
  padding: 10px;
  box-sizing: border-box;
  z-index: 1000;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
}

.log-header {
  color: #0f0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  border-bottom: 1px solid #222;
  padding-bottom: 5px;
}

.log-content {
  height: calc(100% - 30px);
  overflow-y: auto;
  font-size: 11px;
}

.log-entry {
  margin-bottom: 3px;
  display: flex;
  gap: 10px;
}

.log-time {
  color: #555;
  min-width: 70px;
}

.log-message {
  color: #0f0;
  flex: 1;
}

/* 自定义滚动条 */
:deep(.hacker-table::-webkit-scrollbar),
:deep(.log-content::-webkit-scrollbar),
:deep(.terminal-content::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:deep(.hacker-table::-webkit-scrollbar-track),
:deep(.log-content::-webkit-scrollbar-track),
:deep(.terminal-content::-webkit-scrollbar-track) {
  background: #111;
}

:deep(.hacker-table::-webkit-scrollbar-thumb),
:deep(.log-content::-webkit-scrollbar-thumb),
:deep(.terminal-content::-webkit-scrollbar-thumb) {
  background: #0f0;
  border-radius: 4px;
}

:deep(.hacker-table::-webkit-scrollbar-thumb:hover),
:deep(.log-content::-webkit-scrollbar-thumb:hover),
:deep(.terminal-content::-webkit-scrollbar-thumb:hover) {
  background: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .terminal-container {
    padding: 10px;
  }
  
  .terminal-content {
    padding: 15px;
  }
  
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-actions {
    margin-left: 0;
    justify-content: center;
  }
  
  .hacker-input {
    width: 100%;
  }
  
  .pagination {
    flex-direction: column;
    gap: 10px;
  }
  
  .system-log-panel {
    height: 100px;
  }
  
  .hacker-table {
    overflow-x: auto;
  }
  
  .table-header,
  .table-row {
    grid-template-columns: auto;
    min-width: 910px;
  }
}

/* 脉冲动画效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
  }
}

.hacker-button.primary,
.hacker-button.success {
  animation: pulse 2s infinite;
}

/* 加载动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading {
  animation: spin 1s linear infinite;
}
</style>